import React from 'react'
import { lazy, Suspense } from 'react'
import { ComponentType } from 'react'
import { RouteObject, useRoutes } from 'react-router-dom'
import NotFound from '@/components/home/notFound'
import Empty from '@/components/home/notFound/empty'
import Loading from '@/components/home/loading/saleLoading'

export interface IRouteType extends RouteObject {
  name: string
  component: ComponentType
  children?: IRouteType[]
}

const routeConfig: IRouteType[] = [
  {
    name: 'Index',
    path: '/',
    component: lazy(() => import('@/pages/payment/index')),
    // component: Empty,
  },
  {
    name: 'Index',
    path: '/payment',
    component: lazy(() => import('@/pages/payment/index')),
    // component: Empty,
  },
  {
    name: 'addressSelect',
    path: '/addressSelect',
    component: lazy(() => import('@/components/address/addressSelect')),
    // component: Empty,
  },
  {
    name: 'addAddress',
    path: '/addAddress',
    component: lazy(() => import('@/components/address/addAddress')),
    // component: Empty,
  },
  {
    name: 'payPayStatus', // 支付状态中页面
    path: '/pay/payStatus',
    component: lazy(() => import('@/pages/payment/paying')),
    // component: Empty,
  },
  {
    name: 'payPayEmpty', //订单号为空
    path: '/pay/payEmpty',
    component: lazy(() => import('@/pages/payment/payEmpty')),
    // component: Empty,
  },
  {
    name: 'payStatus', // 支付状态页面
    path: '/payStatus',
    component: lazy(() => import('@/pages/payment/payStatus')),
    // component: Empty,
  },
  {
    name: 'payLoseEfficacy', // 支付失败页面
    path: '/payLoseEfficacy',
    component: lazy(() => import('@/pages/payment/payLoseEfficacy')),
    // component: Empty,
  },
  {
    name: 'paySuccess', // 支付状态页面
    path: '/paySuccess',
    component: lazy(() => import('@/pages/payment/paySuccess')),
    // component: Empty,
  },
  {
    name: 'orderList', // 支付状态页面
    path: '/orderList',
    component: lazy(() => import('@/pages/orderList/index')),
    // component: Empty,//orderDetail
  },
  {
    name: 'orderDetail', // 支付状态页面
    path: '/orderDetail',
    component: lazy(() => import('@/pages/orderList/orderDetail')),
    // component: Empty,//orderDetail
  },
  //payLoseEfficacy
  {
    name: 'nocourse',
    path: '/nocourse',
    component: lazy(() => import('@/components/home/notFound/nocourse')),
    // component: Empty,
  },
  {
    name: 'changeCourseList',
    path: '/changeCourseList',
    component: lazy(() => import('@/pages/changeCourse/changeCourseList/index')),
    // component: Empty,
  },
  {
    name: 'changeCourseType',
    path: '/changeCourseType',
    component: lazy(() => import('@/pages/changeCourse/changeCourseType/index')),
  },
  {
    name: 'interchangeablePlan',
    path: '/interchangeablePlan',
    component: lazy(() => import('@/pages/changeCourse/interchangeablePlan/index')),
  },
  {
    name: 'changeTalk',
    path: '/changeTalk',
    component: lazy(() => import('@/pages/changeCourse/changeTalk/index')),
  },
  {
    name: 'confirmPlan',
    path: '/confirmPlan',
    component: lazy(() => import('@/pages/changeCourse/confirmPlan/index')),
  },
  {
    name: 'changeCourse',
    path: '/changeCourse',
    component: lazy(() => import('@/pages/changeCourse/changeCourse/index')),
  },
  // {
  //   name: 'login',
  //   path: '/login',
  //   component: lazy(() => import('@/pages/login/index')),
  // },
  {
    name: 'success',
    path: '/success',
    component: lazy(() => import('@/pages/changeCourse/changeSuccess/index')),
  },
  {
    name: 'confirm',
    path: '/confirm',
    component: lazy(() => import('@/pages/changeCourse/confirm/index')),
  },
  {
    name: 'NotFound',
    path: '*',
    component: NotFound,
  },
]

const createRouteConfig = (routeList: IRouteType[]): RouteObject[] => {
  return routeList.map(({ path, component: Com, children, ...props }) => {
    return {
      path,
      element: (
        <Suspense fallback={<Loading noBorder={false} modal={true} />}>
          <Com />
        </Suspense>
      ),
      ...props,
      children: children && createRouteConfig(children),
    }
  })
}

export default createRouteConfig(routeConfig)
